<template>
  <div class="ht-div">
    <div class="ht-div-1">
      <div class="img-div"><img src="@/assets/htbj1.png"/></div>
      <div class="login-div">
        <div class="text">海南省水务建设质量信息管理系统</div>
        <div class="login-div-form">
          <a-form
            class="user-layout-login"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item>
              <a-input
                type="text"
                placeholder="请输入用户名"
                v-decorator="[
                  'username',
                  {
                    rules: [{ required: true, message: '请输入用户名' }],
                    validateTrigger: 'change'
                  }
                ]"
              ></a-input>
            </a-form-item>
          <a-form-item>
            <a-input-password
              autocomplete="false"
              placeholder="请输入密码"
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '请输入密码' }],
                  validateTrigger: 'blur'
                }
              ]"
            >
            </a-input-password>
          </a-form-item>
          <!-- <a-form-item>
            <a-input-search v-model="form.code"  placeholder="请输入验证码"
            v-decorator="[
              'code',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                  {
                    validator: validateCode,
                  },
                ],
              },
            ]" >
              <a-button slot="enterButton">
                <valid-code :value.sync="validCode" @input="getValidCode" :width="'50px'" :height="'30px'"></valid-code>
              </a-button>
            </a-input-search>
          </a-form-item> -->
          <!-- v-model="form.code" -->
          <a-form-item>
            <a-input  placeholder="请输入验证码"
            v-decorator="[
              'code',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                  {
                    validator: validateCode,
                  },
                ],
              },
            ]" >
             
                <valid-code slot="addonAfter" :value.sync="validCode" @input="getValidCode" :width="'70px'" :height="'30px'"></valid-code>
    
            </a-input>
          </a-form-item>
            <a-form-item >
              <a-button
                block
                type="primary"
                htmlType="submit"
                class="login-button"
                :loading="loading"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import validCode from '@/components/ValidCode';
export default {
  components: {
        validCode
      },
  data() {
    
    return {
      form: this.$form.createForm(this),
      loading: false,
      validCode: '',
      
    };
  },
  methods: {
    getValidCode(code){
      this.validCode = code;
    },
    validateCode(rule, value, callback) {
     const form = this.form;
      if (value && value.toLowerCase().trim()!=this.validCode.toLowerCase().trim()) {
        callback('验证码输入错误！');
      } else {
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      const {
        form: { validateFields }
      } = this;
      let vm = this;
      validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          alert("登录成功")
        }
      });
    }
  },
};
</script>

<style lang="less">
.ht-div{
  width:100%;
  height: 100%;
  min-width:1200px;
  max-width:100%;
  max-height: 100%;
  min-height: 550px;
  background-image: url(../../assets/htbj.png);
  background-size: 100% 100%;
  text-align: center;
  .ht-div-1{
    display: flex;
    width: 70%;
    left:15%;
    position: relative;
    height: 70%;
    top: 15%;
    background: #FFFFFF;
    box-shadow: 1px 6px 20px 0px #86A9E7;
    border-radius: 20px;
    .img-div{
      width: 53%;
      img{
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        // border-radius: 20px 0 0 20px;
      }
    }
    .login-div{
      width: 47%;
      text-align: center;
      .text{
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #347CD8;
        line-height: 35px;
        text-shadow: 1px 6px 10px rgba(134, 169, 231, 0.6);
        margin-top: 50px;
      }
      .login-div-form{
        width: 70%;
        margin-left: 15%;
        margin-top: 20px;
        .ant-form-item {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            -webkit-font-feature-settings: 'tnum';
            font-feature-settings: 'tnum';
            margin-bottom: 15px;
            vertical-align: top;
            text-align: left;
        }
      }
    }
  }
}
</style>
